<template>
  <el-form ref="login" class="login-form phone-form" :model="formData" @validate="onValidate">
    <el-form-item
      prop="phone"
      :rules="[
        { required: true, message: '请输入手机号' },
        {
          pattern: /^1\d{10}$/,
          message: '请输入手机号',
          trigger: ['blur', 'change'],
        },
      ]"
    >
      <LimitInput
        v-model.trim="formData.phone"
        numb
        clearable
        prefix-icon="el-icon-user"
        placeholder="请输入手机号"
        :maxlength="11"
      ></LimitInput>
    </el-form-item>
    <el-form-item
      prop="password"
      :rules="[
        { required: true, message: '请输入密码' },
        { min: 6, message: '最少6位密码' },
      ]"
    >
      <el-input
        v-model.trim="formData.password"
        prefix-icon="el-icon-lock"
        placeholder="请输入密码"
        type="password"
        :show-password="true"
        @keyup.enter.native="handleSubmit"
      >
      </el-input>
    </el-form-item>
    <el-button
      :disabled="disabled"
      style="width: 100%"
      class="login-btn"
      type="primary"
      @click="handleSubmit"
    >
      确定
    </el-button>
  </el-form>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        phone: '',
        password: '',
      },
      valided: {
        phone: false,
        password: false,
      },
    };
  },
  computed: {
    disabled() {
      return !this.valided.phone || !this.valided.password;
    },
  },
  methods: {
    handleSubmit() {
      !this.disabled && this.$emit('submit', this.formData);
    },
    onValidate(valid, suc) {
      this.valided[valid] = suc;
    },
  },
};
</script>
<style lang="less" scoped>
.phone-form {
}
</style>
